<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>风Pay支付平台</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>



    <script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
    <!--<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>-->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!-- smoke  begin -->
    <link href="http://cdn.bootcss.com/smokejs/3.1.1/css/smoke.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="http://cdn.bootcss.com/smokejs/3.1.1/js/smoke.js"></script>
    <!-- smoke js end -->

    <link href="css/generalStyle.css" rel="stylesheet">
    <style>



        .pay_body {
            margin: 5% 16%;
        }

        .order_title {
            font-size: 25px;
            color: #333;
        }

        .order_fu_title {
            font-size: 15px;

        }

        .row_msg {

        }

        .row_msg dt {
            float: left;
            text-align: left;
            width: 150px;
            margin-right: 15px;
        }

        .pay-method label {
            float: left;
            width: 144px;
            height: 45px;
            /* border: 1px solid #ddd; */
            background: url(css/img/UnionPay.jpg) no-repeat center center;
            margin-right: 5px;
            cursor: pointer;
        }
        .pay_img{
            cursor: pointer;
        }

        /*方法二：使用滤镜*/
        .cssshadow
        {
            -moz-box-shadow: 3px 3px 4px #000;
            -webkit-box-shadow: 3px 3px 4px #000;
            box-shadow: 3px 3px 4px #000;
            /* For IE 8 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
            /* For IE 5.5 - 7 */
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
        }

        .pay_form {
            text-align: center;
        }

        .pay_type{
            margin-left: 10px;
        }

        .totle_m{
            color: #df032f;
            font-size: 20px;
        }

    </style>
    <script type="text/javascript">
        $(function(){
            $('.pay_img').on('click',function(){
                $(this).parents('dd:first').find('img').removeClass('cssshadow');
                $(this).addClass('cssshadow');
                $('#pay_type').val($(this).attr('dataTab'))
            });
        });
    </script>


</head>
<body>
<div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <img class="title_img" alt="Brand" src="css/img/logo.png">

            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">

                    <li><a href="javascript:void(0)" class="nav_title1">微支付平台</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <br/>
    <br/>
    <br/>
    <br/>


    <div class="panel panel-default">
        <div class="panel-body pay_body">


            <div class="row">
                <div class="col-md-12" role="main">
                    <div class="media">
                        <div class="media-left">
                            <img class="media-object" src="css/img/ok.png" alt="...">
                        </div>
                        <div class="media-body">
                            <h2 class="media-heading order_title">选择支付方式</h2>

                            <p>
                                <span class="order_fu_title">请您检查您的订单是否有误，并在20分钟内完成支付</span>
                            </p>
                        </div>
                    </div>
                    <hr/>
                    <dl class="row_msg">
                        <dt class="">订单号:</dt>
                        <dd class="o_order_code">PM201708281252OLEN</dd>
                    </dl>
                    <dl class="row_msg">
                        <dt class="">收款单位/人:</dt>
                        <dd class="tar_name">supor苏泊尔兆洪专卖店</dd>
                    </dl>
                    <dl class="row_msg">
                        <dt class="">商品说明:</dt>
                        <dd class="order_name">苏泊尔 CFXB40FC835-75电饭煲锅4L智能家用正品2-3-4-5-6人</dd>
                    </dl>
                    <dl class="row_msg">
                        <dt class="">应付金额:</dt>
                        <dd class="totle_m">￥ 230.01</dd>
                    </dl>
                    <dl class="row_msg">
                        <dt class="">支付方式:</dt>
                        <dd class="pay-method">
                            <span class="pay01 pay_type">
                                <img class="pay_img" dataTab="001" src="css/img/alipay.png">
                            </span>
                            <span class="pay02 pay_type">
                                <img class="pay_img" dataTab="002" src="css/img/wechat.png">
                            </span>
                            <span class="pay03 pay_type">
                                <img class="pay_img" dataTab="003" src="css/img/UnionPay.jpg">
                            </span>
                           <!-- <label><input type="radio" name="payType" value="1"/></label>
                            <label class="pay02"><input type="radio" name="payType" value="2"/></label>
                            <label class="pay03"><input type="radio" name="payType" value="3"/></label>-->
                        </dd>

                    </dl>


                </div>
            </div>
            <hr/>
            <div class="row">
                <div class="col-md-12" role="main">

                    <form class="pay_form">
                        <input type="hidden" id="pay_type" name="pay_type"/>
                        <input type="hidden" id="order_code" name="order_code" value="PM201708281252OLEN"/>

                        <button type="submit" class="btn btn-danger">确认支付该订单</button>
                    </form>
                </div>
            </div>

        </div>
    </div>


</div>
<div class="footer">
    <div class="foot-hd">
        <span><a href="javascript:void(0)">网站地图</a>|</span>
        <span><a href="javascript:void(0)">法律声明</a>|</span>
        <span><a href="javascript:void(0)">联系我们</a>|</span>
        <span><a href="javascript:void(0)">工作机会</a></span>
    </div>
    <p>Copyright© | 2016 - 2017 | 深证风轮科技有限责任公司版权所有 | 深ICP证040922号</p>
</div>
</body>
</html>